<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" label-width="71px">
      <el-row>
        <el-col :span="5">
          <el-form-item label="分配时间" prop="timeGroup">
            <el-date-picker v-model="timeGroup" type="daterange" :picker-options="pickerOptions" editable
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>


        <el-col :span="5">
          <el-form-item label="来源" prop="channel_source">
            <el-select v-model="channel_source" placeholder="请选择渠道" clearable style="width:100%">
              <el-option v-for="dict in channelList" :key="dict.channelSource" :label="dict.channelName"
                :value="dict.channelSource" />
            </el-select>
            </el-form-item>
        </el-col>



        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="custinfoList" fit style="width: 100%" show-summary
      :summary-method="getSummaries">
      <el-table-column label="渠道" align="center" prop="channel_source" min-width="3%">
        <template slot-scope="scope">
          {{ getChannelName(scope.row.channel_source) }}
        </template>
      </el-table-column>
      <el-table-column label="未处理" align="center" prop="starlevel_99" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, 0, null, null, scope.row.channel_source)">{{
          scope.row.starlevel_99 + '/' + scope.row.starlevel99_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="0星数据" align="center" prop="starlevel_0" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 0, null, scope.row.channel_source)">{{
          scope.row.starlevel_0 + '/' + scope.row.starlevel0_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="0星上门" align="center" prop="visitcount_0" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 0, 1, scope.row.channel_source)">{{
          scope.row.visitcount_0 + '/' + scope.row.visitcount0_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="1星数据" align="center" prop="starlevel_1" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 1, null, scope.row.channel_source)">{{
          scope.row.starlevel_1 + '/' + scope.row.starlevel1_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="1星上门" align="center" prop="visitcount_1" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 1, 1, scope.row.channel_source)">{{
          scope.row.visitcount_1 + '/' + scope.row.visitcount1_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="2星数据" align="center" prop="starlevel_2" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 2, null, scope.row.channel_source)">{{
          scope.row.starlevel_2 + '/' + scope.row.starlevel2_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="2星上门" align="center" prop="visitcount_2" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 2, 1, scope.row.channel_source)">{{
          scope.row.visitcount_2 + '/' + scope.row.visitcount2_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="3星数据" align="center" prop="starlevel_3" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 3, null, scope.row.channel_source)">{{
          scope.row.starlevel_3 + '/' + scope.row.starlevel3_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="3星上门" align="center" prop="visitcount_3" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 3, 1, scope.row.channel_source)">{{
          scope.row.visitcount_3 + '/' + scope.row.visitcount3_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="4星数据" align="center" prop="starlevel_4" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 4, null, scope.row.channel_source)">{{
          scope.row.starlevel_4 + '/' + scope.row.starlevel4_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="4星上门" align="center" prop="visitcount_4" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 4, 1, scope.row.channel_source)">{{
          scope.row.visitcount_4 + '/' + scope.row.visitcount4_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="5星客户" align="center" prop="starlevel_5" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 5, null, scope.row.channel_source)">{{
          scope.row.starlevel_5 + '/' + scope.row.starlevel5_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="5星客户上门" align="center" prop="visitcount_5" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 5, 1, scope.row.channel_source)">{{
          scope.row.visitcount_5 + '/' + scope.row.visitcount5_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="2星+" align="center" prop="starlevel_7" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, 7, null, scope.row.channel_source)">{{
          scope.row.starlevel_7 + '/' + scope.row.starlevel7_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="2星+上门" align="center" prop="visitcount_7" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, 7, 1, scope.row.channel_source)">{{
          scope.row.visitcount_7 + '/' + scope.row.visitcount7_ratio + '%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总数据量" align="center" prop="starcount_total" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2"
            @click="custleveldataDetails(scope.row.emp_id, null, null, null, scope.row.channel_source)">{{
          scope.row.starcount_total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总上门量" align="center" prop="visitcount_total" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span1"
            @click="custleveldataDetails(scope.row.emp_id, null, null, 1, scope.row.channel_source)">{{
          scope.row.visitcount_total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总上门占比" align="center" prop="id" min-width="3%">
        <template slot-scope="scope">
          <span class="report_span2">{{ scope.row.visitcount_total_ratio }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看客户列表 -->
    <el-dialog :title="title" :visible.sync="open" class="dialogCust" width="96%" :fullscreen="modal" append-to-body
      :modal="modal" :destroy-on-close="modal">
      <cust-info-list :form.sync="form"></cust-info-list>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelDataStatics } from "@/api/crmsys/report/custStatics";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import CustInfoList from "@/components/crmSys/custInfoList";

import {
  listChannelInfo
} from "@/api/crmsys/channelInfo.js";

export default {
  name: "ChannelDataStatics",
  dicts: [
    "crm_dept_level"
  ],
  components: { Treeselect, CustInfoList },
  data() {
    return {
      deptId: null,
      timeGroup: [new Date(), new Date()],
      // 遮罩层
      loading: false,
      open: false,
      custinfoList: [],
      //是否是扫码
      referrals: "0",
      channel_source: null,
      //申请时间
      applyTime: null,
      modal: false,      
      channelList: [],
      title: '客户列表',
      form: {},//通过from去子组件查询列表数据
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  created() {
    this.applyTime = [this.getNowFormatDate(), this.getNowFormatDate()]
    listChannelInfo({ status: 8 , pageSize:1000}).then(response => {
      this.channelList = response.rows;
    });
  },
  // methods方法
  methods: {
    /** 总计 */
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if (column.property != 'dept_name' && column.property != 'id') {
          sums[index] = this.calculateSum(data, column.property);
        } else {
          sums[index] = '--';
        }
      });
      return sums;
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    calculateSum(data, name) {
      let sum = 0;
      data.forEach(value => {
        sum = sum + value[name];
      });
      return sum;
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.deptId = null;
      this.timeGroup = null;
    },
    getList() {
      if (this.timeGroup == null || this.timeGroup == "") {
        //必须选择时间
        this.$message.error("请选择要查询的时间！");
        return;
      }
      this.loading = true;

      let inparams = { "timeGroup": this.timeGroup, "channel_source": this.channel_source }
      getChannelDataStatics(inparams).then(response => {
        this.custinfoList = response.rows;
      });
      this.loading = false;
    },
    custleveldataDetails(userId, status, starLevel, isVisited, channel_source) {
      //查询明细数据
      let inparams = {};
      inparams.status = status != null ? status.toString() : '';
      inparams.starLevel = starLevel != null ? starLevel.toString() : '';
      inparams.deptId = this.deptId;
      inparams.params = {};
      if (starLevel == 0) {
        inparams.params.isStatus0 = 1;
      }
      inparams.specialParams = {};
      inparams.specialParams.oldDistributeTime = this.timeGroup;
      inparams.specialParams.applyTime = this.applyTime;
      inparams.params.referrals = this.referrals;
      // inparams.params.userId = userId;
      inparams.params.isVisited = isVisited != null ? isVisited.toString() : '';
      inparams.channelSource = channel_source;
      inparams.pageNum = 1;
      inparams.pageSize = 10;
      console.log(inparams);
      this.$set(this.$data, 'form', inparams);
      this.open = true;
    },
    getChannelName(channelSource) {
      const channel = this.channelList.find(item => item.channelSource === channelSource);
      return channel ? channel.channelName : '';
    }

  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';

.report_span1 {
  color: blue;
  cursor: pointer;
}

.report_span2 {
  color: rgb(231, 62, 146);
  cursor: pointer;
}
</style>
